<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content=blank/>
    <meta name="format-detection" content="telephone=no"/>
    <title>乐账</title>
    <link rel="apple-touch-icon-precomposed" href="images/haorooms.jpg"/>
    <link rel="apple-touch-startup-image" href="images/haorooms.jpg"/>
    <link rel="stylesheet" href="css/main-style.css">

</head>
<body>

<!--主页面-->
<div id="main-page">
  <header class="main-header-bar">
  		<div class="header-common">
  			<div class="bar-menu-icon"><span class="icon"></span></div>
  			<h3>乐账</h3>
  		</div>
  		<div class="main-header-nav">
  			<ul>
  				<li class="outlay fl"><span id="outmonth">12月支出</span><span id="outnum">0.00</span></li>
  				<li class="income fl"><span id="inmonth">12月收入</span><span id="innum">0.00</span></li>
  			</ul>
  		</div>
  </header>
  <div id="accout-btn"><input type="button"></div>
  <section class="outlay-list">
    <ul class="outlay-ul-0">
      <li class="out-date"><span>今日支出</span><p class="out-today-num">0.00</p></li>
      <!--
      <li class="out-li" id="test-1" >
            <div  class="out-class-icon"><span class="icon"></span></div>
            <div class="out-class-mes "><p class="outClass">吃饭</p><p class="outMes">我是备注</p>
                <p class="outNum">10.00</p>
            </div>
      </li>
      -->
    </ul>
  </section >
</div>



  <!--最下一行图标-->
  <section id="footer" class="footer">
      <div id="main" class="edit-icon fl" ><span></span><p>记账</p></div>
      <div id="chart" class="chart-icon fl" ><span></span><p>报表</p></div>
      <div id="myMoney" class="wallet-icon fl" ><span></span><p>钱包</p></div>
      <div id="user" class="user-icon fl" ><span></span><p>用户</p></div>
  </section>


<!--
	输出流水界面F

<div id="out-detail-page">
	<header class="child-header-common">
		<div class="left-back-icon"><span class="icon"></span></div>
		<h3>账单详情</h3>
		<div id="del-btn" class="delet-icon"><span class="icon"></span></div>
	</header>
		
				
		
</div>
-->

<!--编辑界面-->
<div id="account-page">
  	<header class="child-header-common">
		<div id="chg-icon" class="close-icon"><span class="icon" ></span></div>
		<h3 id="chg-title">记账</h3>
		<div id="del-btn" class="delet-icon"><span class="icon"></span></div>
	</header>
	<section id="account-num">
		<div id="num-class-icon" class=""><span class="icon"></span></div>
		<p id="num-class-p">类别</p>
		<input type="text" id="screenName" name="screenName" maxlength="8" value="0.00" >
		
	</section>
	<section id="account-class">
		<span id="account-out" class="class-on">支出</span>
		<span id="account-in" class="class-off">收入</span>
	</section>
	<section id="account-img">
		<ul id="account-out-ul">
		<li class="aimg-0 aimgs"><span class="img-0-out icon"></span><p>餐饮食品</p></li>
      <li class="aimg-1 aimgs"><span class="img-1-out icon"></span><p>行车交通</p></li>
      <li class="aimg-2 aimgs"><span class="img-2-out icon"></span><p>水果</p></li>
      <li class="aimg-3 aimgs"><span class="img-3-out icon"></span><p>购物</p></li>
      <li class="aimg-4 aimgs"><span class="img-4-out icon"></span><p>蔬菜</p></li>
      <li class="aimg-5 aimgs"><span class="img-5-out icon"></span><p>日用品</p></li>
      <li class="aimg-6 aimgs"><span class="img-6-out icon"></span><p>休闲娱乐</p></li>
      <li class="aimg-7 aimgs"><span class="img-7-out icon"></span><p>服装饰品</p></li>
      <li class="aimg-8 aimgs"><span class="img-8-out icon"></span><p>护肤美妆</p></li>
      <li class="aimg-9 aimgs"><span class="img-9-out icon"></span><p>其他支出</p></li> 
		</ul>	
	    <ul id="account-in-ul">
	<li class="aimg-0 aimgs"><span class="img-0-in icon"></span><p>赚钱</p></li>
      <li class="aimg-1 aimgs"><span class="img-1-in icon"></span><p>奖金</p></li>
      <li class="aimg-2 aimgs"><span class="img-2-in icon"></span><p>投资</p></li>
      <li class="aimg-3 aimgs"><span class="img-3-in icon"></span><p>红包</p></li>
      <li class="aimg-4 aimgs"><span class="img-4-in icon"></span><p>礼金</p></li>
      <li class="aimg-5 aimgs"><span class="img-5-in icon"></span><p>其他收入</p></li>
      
		</ul>		
	</section>
	<section id="remark-information">
		<input type="text" id="remarkInput" name="remarkInput" value="请输入备注信息">
		<div id="voice-icon"><span></span></div>
	</section>
	<section id="calculator" class="keys">
    	<!-- operators and other keys -->
   		 <!--第一排-->
	   		<input type="button" id="7" value="7" class="buttons">
	   		<input type="button" id="8" value="8" class="buttons">
	    	<input type="button" id="9" value="9" class="buttons">
	    	<input type="button" id="+" value="+" class="buttons">
	     <!--第二排-->
	    	<input type="button" id="4" value="4" class="buttons">
		    <input type="button" id="5" value="5" class="buttons">
		    <input type="button" id="6" value="6" class="buttons">
		    <input type="button" id="-" value="-" class="buttons">
		    <!--第三排-->
		    <input type="button" id="1"  value="1" class="buttons">
		    <input type="button" id="2"  value="2" class="buttons">
		    <input type="button" id="3"  value="3" class="buttons">
		    <input type="button" id="eva"  value="确认" class="buttons buttons-ok">
		    <!--第四排-->
		    <input type="button" id="."  value="." class=" buttons">
		    <input type="button" id="0"  value="0" class="buttons">
		    <input type="button" id="Back" value="Back" class="buttons">
	</section>


 <section id="mes-save-btn">
     <input type="button" id='add-save-btn' class="save-btn" value="保存" />
 </section>
</div>


<!--
	作者：1393827211@qq.com
	时间：2017-01-03
	描述：详情界面


<div id="out-detail-page">

	<header class="child-header-common">
		<div class="left-back-icon"><span class="icon"></span></div>
		<h3>账单详情</h3>
		<div id="del-btn" class="delet-icon"><span class="icon"></span></div>
	</header>
	<section id="detail-mes">
		<ul id="detail-list" >
	        <li id="detail-out"class="detail-li">
	            <div  class="out-class-icon"><span id="detail-class-icon" class="icon"></span></div>
	            <div id="detail-class-mes">
	            	<p id="detailClass"></p>
	                <p id="detailNum"></p>
	            </div>                 
	        </li>
	        <li class="detail-li">
	        	
	        </li>
	        <li class="detail-li">
	        	
	        </li>
	        <li class="detail-li">
	        	
	        </li>
	        <li class="detail-li">
	        	
	        </li>
	        <li class="detail-li">
	        	
	        </li>
    	</ul>
		
	</section>	
	<setion id="detail-save-btn">
		<input id="chg-save-btn" type="button" value="保存" class="save-btn">
	</setion>
		
</div>	
-->			
<div id="mask"></div>	
	
	
	
<!--语音输入界面-->
<div id="voice-page">
<header id="voice-header">
	<div id="voice-close-icon"><span></span></div>
	<p>按住说话 松开记账</p>
</header>
<div id="voice-images"><span></span></div>

<footer>
	<div id="voice-btn"><span></span><p>按住说话</p></div>
</footer>

</div>



<!--
	作者：1393827211@qq.com
	时间：2016-12-14
	描述：分析界面
-->

<div id="chart-page">
	<header id="chart-header" class="header-common">
		<select name="chart-select" class="chart-select">
			<option value="分类">分类</option>
			<option value="成员">成员</option>
		</select>
	</header>	
	<div class="class-btn">
		<div class="btn-1">支出</div><div class="btn-2">收入</div>
		<div class="bottom-slide-btn"></div>
		</div>
	<div class="date-btn">
		
	</div>
	<section class="chart-main">
	<div id="pie-chart"><canvas id="bingtu" width="1000" height="200">
		Your browser does not support the canvas element.
		</canvas>
 	</div>
 	<section class="chart-out-list">
 		<ul class="chart-out-ul">
 			
 		</ul>
 	</section>
		
	</section>
</div>

<div id="myMoney-page">
	<header id="myMoney-header" class="header-common">
		<h3>我的资金</h3>
	</header>	
	<section class="myMoney-main">
		<input type="password">	
		<div>
			<ul>
				<li><div><span class="money-icon"></span><h3>现金</h3><p></p></div></li>
				<li><div><span class="saving-card-icon"></span><h3>储蓄卡</h3><p></p></div></li>
				<li><div><span class="credit-card-icon"></span><h3>信用卡</h3><p></p></div></li>
				<li><div><span class="alipay-icon"></span><h3>支付宝</h3><p></p></div></li>
				<li><div><span class="borrow-icon"></span><h3>借出款</h3><p></p></div></li>
				<li><div><span class="arrears-icon"></span><h3>欠款</h3><p></p></div></li>
			</ul>
		</div>
	</section>
</div>

<div id="user-page">
	<header class="user-head">
		<div id="user-img"><img/></div>
		<div class="user-text">请登录</div>
	</header>
	
	
	
</div>

<!--
	作者：1393827211@qq.com
	时间：2017-01-08
	描述:登录页面
-->
<div id="login-page">
  	<header class="login-header">
		<div class="blue-back-icon "><span class="icon" ></span></div>
		<!--<h3>乐账</h3>-->
	</header>
	<section class="login-text-img">
		<div></div>
	</section>
	<section class="logging">
    	<form>  
    		<ul class="bgf pl12 outborder">
        		<li class="pt12 pb12 border_bottom">
	            <s></s>
	            <input name="mobile" type="tel" placeholder="请输入您的手机号" id="login-Mobile">
	            <s class="warn" id="pass1_error" style="display:none;"></s>
	            </li>
	            <li class="pt12 pb12">
	            <s class="uc_logging_password"></s>
	            <input name="userpwd" type="password" placeholder="请输入您的密码" id="login-Password">
	            <s class="warn" id="pass_error" style="display:none;"></s>
	            </li>
        	</ul>
        	<div class="find_paw"><a href="#">忘记密码？</a></div>
        	<div class="btn_wrap" id="login_user">
        		<input  type="button" value="登录" disabled="disabled" class="submit-btn" >  
       		 </div>
        </form>
        <div class="quick_register">
            <div><a href="#">快速注册&gt;</a></div>
        </div>

 	</section>

	<section class="else-login"> 
		<div><span>其他方式登录</span></div>
		<nav id="login-list">
	    	<ul>
	     		<li><a id="qq-login" href="#"><span></span></a></li>
	      		<li><a id="weixin-login" href="#"><span></span></a></li>
	      		<li><a id="taobao-login" href="#"><span></span></a></li>
	    	</ul>
  		</nav>
	</section>
</div>

<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
	<span id="mess"></span>
</div>
<script src="js/require.js"  data-main="js/mainconfig"></script>

</body>
</html>